<!-- 审批节点配置修改页 -->
<template>
    <Drawer title="审批节点配置" v-model="localShowConfig" width="700" @on-visible-change="changeVisible"
        :mask-closable="false" scrollable>
        <div class="condition_item" v-if="formData">
            <Space>
                节点名称：
                <Input v-model="formData.nodeName" placeholder="请输入节点名称" clearable />
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <Space>
                审批人：
                <Select v-model="formData.userList" clearable placeholder="审批人" style="width: 200px;" multiple>
                    <Option v-for="item in userList" :value="item.id">{{ item.userName }}</Option>
                </Select>
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <Space>
                超时自动审批：
                <Switch v-model="formData.isOvertime" />
            </Space>
        </div>
        <div class="condition_item" v-if="formData && formData.isOvertime">
            <Space>
                审批期限：
                <InputNumber v-model="formData.overtime" controls-outside :min="0" />
            </Space>
        </div>
        <div class="condition_item" v-if="formData && formData.isOvertime">
            <Space>
                超时后执行：
                <Select v-model="formData.autoPass" clearable placeholder="审批期限超时后执行" style="width: 200px;">
                    <Option v-for="item in autoPassList" :value="item.value">{{ item.label }}</Option>
                </Select>
            </Space>
        </div>
        <div class="condition_item" v-if="formData">
            <Space>
                多人审批时：
                <Select v-model="formData.multiUser" clearable placeholder="多人审批时审批方式" style="width: 200px;">
                    <Option v-for="item in multiUserList" :value="item.value">{{ item.label }}</Option>
                </Select>
            </Space>
        </div>
        <div class="demo-drawer-footer">
            <Button type="primary" @click="save">保存</Button>
        </div>
    </Drawer>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    showConfig: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object
    }
});

const localShowConfig = ref(props.showConfig);

const emit = defineEmits(['changeVisible', 'update:showConfig']);

const formData = ref({
    nodeName: props.data ? props.data.nodeName : '', // 节点名称
    userList: props.data ? props.data.userList : [], // 审批人员id列表
    isOvertime: props.data ? props.data.isOvertime : false, // 是否超时自动审批 false 否，true 是
    overtime: props.data ? props.data.overtime : 0, // 如isOvertime = true时, overtime为审批时限，0则不生效
    autoPass: props.data ? props.data.autoPass : 0, // 如isOvertime = true时, autoPass为期限后自动审批类型 0: 自动通过, 1: 自动拒绝
    multiUser: props.data ? props.data.multiUser : 0, // 多人审批时的审批方式类型 0: 按顺序依次审批, 1: 会签(可同时审核，每个人必须审批通过), 2: 或签(有一人审批通过即可)
});

watch(() => props.data, (newValue) => {
    formData.value = newValue;
});

// 用户列表
const userList = ref([
    { userName: '张三', id: '1' },
    { userName: '李四', id: '2' },
    { userName: '王五', id: '3' }
]);

// 超时自动审批列表
const autoPassList = ref([
    { label: '自动通过', value: 0 },
    { label: '自动拒绝', value: 1 }
])

// 多人审批方式列表
const multiUserList = ref([
    { label: '按顺序依次审批', value: 0 },
    { label: '会签(可同时审核，每个人必须审批通过)', value: 1 },
    { label: '或签(有一人审批通过即可)', value: 2 },
])

// 保存
const save = () => {
    emit('changeVisible', formData.value);
}

// 修改状态提交关闭
const changeVisible = (val) => {
    emit('update:showConfig', val);
}

</script>

<style scoped lang="scss">
.condition_item {
    margin-bottom: 15px;
}

.demo-drawer-footer {
    width: 700px;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}

:deep(.ivu-table-wrapper) {
    overflow: unset;
}

:deep(.ivu-table) {
    overflow: unset;
}
</style>